import React from 'react';
import ImageLazy from '../../commons/ImageLazy';
import NavLink from '../../commons/NavLink';
import { connect } from 'react-redux';
import {hashHistory } from 'react-router'
import {get_order_classify} from '../../../actions';
import {getServImg} from '../../../actions/ActionTypes';
const user_dele = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../../../static/img/user_dele.png');
const small = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../../../static/img/small.jpg');

class mydefault extends React.Component{
  constructor(props){
   super(props);
   // ES6 类中函数必须手动绑定
   this._loadMore = this._loadMore.bind(this);

   this.state = {
     pageCount:1
   }
 }

  componentDidMount(){
    let {dispatch} = this.props;
    dispatch(get_order_classify({user_id:this.props.userId,state:5}));

    this._test_emp_more()
  }

  componentDidUpdate(){
    this._test_emp_more();
  }

  _loadMore() {
    let {dispatch} = this.props;
    this.setState({
      pageCount:++this.state.pageCount
    })
    dispatch(get_order_classify_more({user_id:this.props.userId,page:this.state.pageCount},function(){
      $('.load_more').text('没有更多了')
    }));
  }

  _test_emp_more(){
    if($('.item_wrapper .item').length == 0){
      $('.prompt').fadeIn();
    }else{
      $('.prompt').hide();
    }

    if($('.item_wrapper .item').length >= 10){
      $('.load_more').fadeIn();
    }else{
      $('.load_more').hide();
    }
  }

  render(){
    let allorder = this.props.get_order_classify || [];
    // this.filterSome(consumed_arr,consumed_arr_obj,consumed_arr_obj_sn,allorder,'3');

    return(
      <div className="userOrder_classify">
      <div className="prompt">
        <ImageLazy src={small} style={{"width":"1rem"}} /><br/>
        您还没有相关订单哦
      </div>
        <div className="item_wrapper">
        {
          allorder.map(function(item,index){
            let this_unionSN = '';
            let imgSrc = getServImg(item.itemImage,'_200_200',item.hospitalId,item.itemId);
            if(item.orderState == 5){
              return(
                <div>
                  <NavLink to={"/user/order/detail/" + item.unionSN} className="item border_b1">
                    <div className="wrapper clearfix">
                      <em className="checks"><var></var></em>
                      <h4>{item.itemName}·{item.itemClass}·{item.doctorName}</h4>
                      <div className="mid">
                        {/* <ImageLazy src="https://dummyimage.com/120x120/b293a4/fff" style={{height:"1.2rem"}}  /> */}
                        <em style={{"background-image":"url("+ imgSrc + ")"}}></em>
                        <div>
                          医院：{item.hospitalName}<br/>
                        </div>
                      </div>
                      <h5>预约金：¥ {item.itemPrice}</h5>
                      <div className="num">×{item.itemNum}</div>
                    </div>
                  </NavLink>
                  <div className="status border_b1">
                    <div className="wrapper">
                      <div className="left">◆ 已消费<small>(消费时间2016.11.25)</small></div>
                      <div className="right">
                      </div>
                    </div>
                  </div>
                </div>
              )
            }

          })
        }
        </div>
      </div>
    )
  }
}

let mapStateToProps = (state) =>{
  let userId = state.user.userId,
    get_order_classify = state.user.get_order_classify;
  // console.log(state.user)
  return{
    userId,
    get_order_classify
  }
}

export default connect(mapStateToProps)(mydefault);
